import React, { useEffect, useState, useRef } from 'react';
import { Button, Select, Pagination, Form, Input } from 'antd';
import api from '../../../../api';
import { useMappedState, useDispatch } from 'redux-react-hook';
import {
    set_delVisible,
    set_delId,
} from '../../../../store/action/house';
import OrderTable from './components/Table';
import DelOrder from './components/DelOrder';

import './index.css'

const Order = () => {
    const dispatch = useDispatch();
    // 获取元素内容
    const form = useRef<any>(null);
    // 变量
    // 团购列表
    const [orderList, setOrderList] = useState<any>([]);
    // 页码
    const [pageIndex, setPageIndex] = useState<number>(1);
    // 每页的数量
    const [pageSize, setPageSize] = useState<number>(5);
    // 总数
    const [total, setTotal] = useState<number>(0);
    // 类型
    const [type,setType] = useState<string>('');
    // 关键字
    const [keyword,setKeyword] = useState<number>(0)
    // 生命周期
    useEffect(() => {
    }, []);
    // 监听状态的变化
    useEffect(() => {
        getOrderList();
    }, [pageIndex,type,keyword])
    // 方法
    // 获取团购列表
    const getOrderList = () => {
        api.getOrderList({
            pageIndex,
            pageSize,
            type,
            keyword
        }).then((res: any) => {
            if (res.success) {
                setOrderList(res.data.data)
                setTotal(res.data.total);
            }
        })
    };
    // 页码改变
    const pageChange = (num: number) => {
        setPageIndex(num);
    }
    // 点击搜索按钮
    const onFinish = async (values: any) => {
        // 更改类型
        setType(values.type)
        // 更改关键字
        setKeyword(values.keyword)
        // 让页码重置
        setPageIndex(1)
    };
    // 点击重置按钮
    const reset = () => {
        // 清空表单
        form.current.resetFields()
    }
    // 删除
    const delOrder = (id: string) => {
        dispatch(set_delVisible(true))
        // 把id存储起来
        dispatch(set_delId(id));
    }
    return (
        <div className="order">
            <div className="header-order">
                订单管理
            </div>
            <div className="wrapper-order">
                {/*  */}
                <div className="search-order">
                    <Form
                        layout="horizontal"
                        onFinish={onFinish}
                        ref={form}
                    >
                        <Form.Item label="订单类型" name="type">
                            <Select placeholder="请选择"
                            style={{width:200}}
                            >
                                <Select.Option value="二手房出租">二手房出租</Select.Option>
                                <Select.Option value="有房出租">有房出租</Select.Option>
                                <Select.Option value="我想买个房">我想买个房</Select.Option>
                                <Select.Option value="我想租个房">我想租个房</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="keyword" label="搜索">
                            <Input placeholder='请输入手机号/用户名/订单号'
                            />
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary"
                                onClick={reset}
                            >重置</Button>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary"
                                htmlType="submit"
                            >查询</Button>
                        </Form.Item>
                    </Form>
                </div>
                {/*  */}
                <OrderTable dataSource={orderList}
                    getOrderList={() => { getOrderList() }}
                    delOrder={(id: string) => { delOrder(id) }}
                ></OrderTable>
                {/*  */}
                <div className="pag-order">
                    <Pagination current={pageIndex} total={total} pageSize={pageSize} onChange={pageChange} />
                </div>
                {/*  */}
                <DelOrder getOrderList={() => { getOrderList() }}></DelOrder>
            </div>
        </div>
    )
};

export default Order